<template>
  <div class="bottom-g-h">
    <div class="topItem">
      <div class="item-l">
        <div class="l-img">
          <img
            src="https://www.guohuihr.cn/uploadfile/2020/1114/1605334485668a65.png"
            alt=""
          />
        </div>
        <div class="l-bot">
          <div class="bot-l">
            <img
              src="http://www.guohuihr.cn/uploadfile/2020/1103/1604403102f4c945.png"
              alt=""
            />
            <p>金鹏二维码</p>
            <p>15632194018</p>
          </div>

          <div class="bot-l">
            <img
              src="http://www.guohuihr.cn/uploadfile/2020/1103/1604403102f4c945.png"
              alt=""
            />
            <p>金鹏二维码</p>
            <p>15632194018</p>
          </div>
        </div>
      </div>

      <div class="item-r">
        <div class="r-txt">
          <div class="txtItem" v-for="(v, i) in floorLise" :key="i">
            <p class="p1">{{ v.title }}</p>
            <p class="small_size"
              v-for="(v1, i1) in v.item"
              :key="i1"
              @click="clickItem(v1.path, v1.id)"
            >
              {{ v1.name }}
            </p>
          </div>

          <!-- <div class="txtItem">
            <p class="p1">关于我们</p>
            <p>关于我们</p>
            <p>残保金减免服务</p>
            <p>留言框</p>
          </div>
           -->
        
        </div>

        <div class="link">
          <p>
            <span>友情链接</span>: &nbsp; 北京残疾人联合会 &nbsp;
            天津市残疾人联合会 &nbsp; 上海残疾人联合会 &nbsp; 重庆市残疾人联合会
            &nbsp; 广州市残疾人联合会
          </p>
          <p>
            成都市残疾人联合会 &nbsp; 郑州市残疾人联合会 &nbsp;
            深圳市残疾人联合会
          </p>
        </div>

        <div class="site">
          <p>l地址: 中国·石家庄·滨江优谷9层</p>
        </div>
      </div>
    </div>

    <div class="bottomItem"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      floorLise: [
        {
          title: "首页",
          item: [
            {
              name: "服务范围",
              id: "scope_of_services",
              path: "/home",
            },
            {
              name: "服务产品",
              id: "service_products",
              path: "/home",
            },
            {
              name: "合作效果",
              id: "service_products",
              path: "/home",
            },
            {
              name: "合作伙伴",
              id: "cooperation_partner",
              path: "/home",
            },
          ],
        },
        {
          title: "新闻资讯",
          item: [
            {
              name: "政策动态",
              id: "NEWs",
              path: "/news/PolicyDynamic",
            },
            {
              name: "政策新文",
              id: "NEWs",
              path: "/news/PolicyNews",
            },
            {
              name: "最新政策",
              id: "NEWs",
              path: "/news/LatestPolicy",
            },
          ],
        },
        {
          title: "职业教育",
          item: [
            {
              name: "职业教育",
              id: "vocational_education",
              path: "/education",
            },
            {
              name: "专家培训",
              id: "expert_training",
              path: "/education",
            },
            {
              name: "灵活应用",
              id: "flexible_application",
              path: "/education",
            },
          ],
        },
        {
          title: "关于我们",
          item: [
            {
              name: "关于我们",
              id: "about_us",
              path: "/about",
            },
            {
              name: "残保金减免服务",
              id: "relief_service",
              path: "/about",
            },
            {
              name: "留言框",
              id: "message_box",
              path: "/about",
            },
          ],
        },
        {
          title: "残保金",
          item: [
            {
              name: "残保金政策文件",
              id: "policy_document",
              path: "/security",
            },
            {
              name: "合作前后优化效果",
              id: "after_cooperation",
              path: "/security",
            },
            {
              name: "完善的服务流程",
              id: "service_flow",
              path: "/security",
            },
            {
              name: "严格的内部管理",
              id: "service_flow",
              path: "/security",
            },
          ],
        },
      ],
    };
  },
  name: "BottomGH",
  methods: {
    clickItem(path, id) {
      this.$router.push({
        path,
        query: { id: id },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.small_size {
  font-size: 14px;
}
.bottom-g-h {
  background-color: #333333;
  width: 100%;
  display: flex;
  flex-direction: column;
  .topItem {
    width: 70%;
    margin: 0 auto;
    display: flex;
    padding: 20px 0;
    .item-l {
      flex: 3;
      display: flex;
      flex-direction: column;
      border-right: 1px solid #fff;
      .l-img {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 45%;
          text-align: center;
          margin: 0 auto;
        }
      }
      .l-bot {
        display: flex;
        justify-content: center;
        align-items: center;
        .bot-l {
          padding: 5px;
          margin-top: 50px;
          img {
            width: 100%;
          }
        }
        p {
          color: #fff;
          text-align: center;
        }
      }
    }
    .item-r {
      flex: 7;
      .r-txt {
        width: 100%;
        height: 200px;
        display: flex;
        color: #fff;
        .txtItem {
          flex: 1;
          p {
            padding: 15px 0 0 50px;
          }
          .p1 {
            font-weight: bold;
          }
        }
      }
      .link {
        margin: 20px 0 0 50px;
        color: #fff;
        font-size: 15px;
        span {
          font-size: 16px;
          font-weight: bold;
        }
      }
      .site {
        margin: 20px 0 0 50px;
        color: #fff;
        font-size: 15px;
      }
    }
  }
}
</style>